<template>
  <el-card shadow="never" class="aui-card--fill">
    <div class="mod-sys__dict">
      <el-form
        :inline="true"
        :model="dataForm"
        @keyup.enter.native="getDataList()"
      >
        <!-- <el-form-item>
                <ren-select v-model="dataForm.merchantType" dict-type="MerchantType" placeholder="请选择商户类型" style="width:100%"></ren-select>
            </el-form-item>
            <el-form-item>
                <el-input v-model="dataForm.name" placeholder="渔家乐名称" clearable></el-input>
            </el-form-item>
            <el-form-item>
                <el-input v-model="dataForm.activity" placeholder="项目名称" clearable></el-input>
            </el-form-item>
            <el-form-item>
                <el-input v-model="dataForm.linkName" placeholder="请输入联系人" clearable></el-input>
            </el-form-item>
            <el-form-item>
                <el-input v-model="dataForm.phone" placeholder="请输入联系方式" clearable></el-input>
            </el-form-item>
            <el-form-item>
                <el-date-picker v-model="dataForm.payTime" type="datetime" placeholder="下单时间" value-format="yyyy-MM-dd hh:mm:ss">
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-select v-model="dataForm.islandId" placeholder="请选择区域" clearable>
                    <el-option v-for="item in scenicOptions" :key="item.id" :label="item.scenicName" :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item>
                <el-select v-model="dataForm.status" placeholder="请选择状态" clearable>
                    <el-option v-for="item in status" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item> -->
        <!-- <el-form-item>
                <el-button @click="getDataList()">{{ $t("query") }}</el-button>
            </el-form-item> -->
        <el-form-item>
          <el-button type="primary" v-if="$hasPermission('fishering:boat:save')" @click="addOrUpdateHandle()">{{
            $t("add")
          }}</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="danger" v-if="$hasPermission('fishering:boat:delete')" @click="deleteHandle(id)">{{
            $t("deleteBatch")
          }}</el-button>
        </el-form-item>
        <!-- <el-form-item>
          <el-button type="primary" @click="setNum()">船只设置</el-button>
        </el-form-item> -->
      </el-form>
      <el-table
        v-loading="dataListLoading"
        :data="dataList"
        border
        @selection-change="dataListSelectionChangeHandle"
        @sort-change="dataListSortChangeHandle"
        style="width: 100%"
      >
        <el-table-column
          type="selection"
          header-align="center"
          align="center"
          width="50"
        ></el-table-column>
        <el-table-column
          prop="boatName"
          label="船只名称"
          :show-overflow-tooltip="true"
          header-align="center"
          min-width="150"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="boatNo"
          label="船编号"
          header-align="center"
          min-width="120"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="boatType"
          label="船类型"
          min-width="120"
          header-align="center"
          align="center"
        >
          <template slot-scope="scope">
            {{ scope.row.boatType == 1 ? "游玩船" : "备用船" }}
          </template>
        </el-table-column>
        <el-table-column
          prop="capacity"
          label="载客数量"
          :show-overflow-tooltip="true"
          header-align="center"
          min-width="150"
          align="center"
        ></el-table-column>
        <!-- <el-table-column prop="info" label="船介绍" header-align="center" min-width="150" align="center"></el-table-column> -->
        <!-- <el-table-column
          prop="coverImg"
          label="船只封面图"
          header-align="center"
          min-width="120"
          align="center"
        >
          <template slot-scope="scope">
            <el-image
              :src="scope.row.coverImg"
              style="width: 100px; height: 100px"
              fit="fill"
              :lazy="true"
              v-if="scope.row.coverImg"
            ></el-image>
          </template>
        </el-table-column> -->
        <el-table-column
          :label="$t('handle')"
          fixed="right"
          header-align="center"
          align="center"
          width="150"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              v-if="$hasPermission('fishering:boat:update')"
              @click="addOrUpdateHandle(scope.row.id)"
              >编辑</el-button
            >
            <el-button
              type="text"
              v-if="$hasPermission('fishering:boat:delete')"
              size="small"
              @click="deleteHandle(scope.row.id)"
              >{{ $t("delete") }}</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="page"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="limit"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="pageSizeChangeHandle"
        @current-change="pageCurrentChangeHandle"
      >
      </el-pagination>
      <!-- 弹窗, 新增 / 修改 -->
      <add-or-update
        v-if="addOrUpdateVisible"
        ref="addOrUpdate"
        @refreshDataList="getDataList"
      ></add-or-update>
      <!-- 设置船库存数量 -->
      <el-dialog
        title="设置每日库存"
        :visible.sync="dialogFormVisible"
        width="30%"
      >
        <el-form :model="form" label-width="100px" :rules="formRule" ref="form">
          <el-form-item label="日期" prop="playDate">
            <el-input v-model="form.playDate" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="数量" prop="num">
            <el-input v-model="form.num" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="dataFormSubmitHandle()"
            >确 定</el-button
          >
        </div>
      </el-dialog>
    </div>
  </el-card>
</template>

<script>
var that;
import debounce from "lodash/debounce";
import mixinViewModule from "@/mixins/view-module";
import AddOrUpdate from "./ship-add-or-update";
export default {
  mixins: [mixinViewModule],
  data() {
    return {
      mixinViewModuleOptions: {
        getDataListURL: "/scenic/boat/page",
        getDataListIsPage: true,
        deleteURL: "/scenic/boat",
        deleteIsBatch: true,
      },
      dialogFormVisible: false,
      boatType: [
        {
          label: "游玩船",
          value: 1,
        },
        {
          label: "备用船",
          value: 2,
        },
      ],
      form: {
        playDate: "",
        num: "",
        merchantId:
          this.$store.state.user.MerchantId ||
          localStorage.getItem("MerchantId"),
      },
      dataForm: {
        merchantId:
          this.$store.state.user.MerchantId ||
          localStorage.getItem("MerchantId"),
        // name: '',
        // merchantType: '',
        // status: '',
        // activity: '',
        // islandId: '',
        // linkName: '',
        // phone: '',
      },
    };
  },
  components: {
    AddOrUpdate,
  },
  computed: {
    formRule() {
      return {
        playDate: [
          {
            required: true,
            message: this.$t("validate.required"),
            trigger: "blur",
          },
        ],
        num: [
          {
            required: true,
            message: this.$t("validate.required"),
            trigger: "blur",
          },
        ],
      };
    },
  },
  created() {
    that = this;
  },
  methods: {
    setNum() {
      this.dialogFormVisible = true;
    },
    // 表单提交
    dataFormSubmitHandle: debounce(
      function () {
        this.$refs["form"].validate((valid) => {
          if (!valid) {
            return false;
          }
          return
          this.$http[
            this.dataForm.id && this.dataForm.goodsType == 2 ? "put" : "post"
          ]("/scenic/goods", this.dataForm)
            .then(({ data: res }) => {
              if (res.code !== 0) {
                return this.$message.error(res.msg);
              }
              this.$message({
                message: this.$t("prompt.success"),
                type: "success",
                duration: 500,
                onClose: () => {
                  this.visible = false;
                  this.$emit("refreshDataList");
                },
              });
            })
            .catch(() => {});
        });
      },
      1000,
      {
        leading: true,
        trailing: false,
      }
    ),
  },
};
</script>
